<!-- 维修中心 -->
<template>
  <div class="fix-center">
    <!-- 维修中心的标题 -->
    <div class="fix-center__title">
      <h2>维修中心</h2>
    </div>
    <!-- 维修中心的维修范围 -->
    <div class="fix-center__range">
      <div class="fix-center__range--title">
        <h3>常用维修服务</h3>
      </div>
      <div class="fix-center__range--flex">
        <div class="fix-center__range--item" v-for="(value,index) in rangeItems" :key="value.id" @click="handleFix(value)">
          <img :src="value.img" alt width="120" height="120" />
          <h4>{{value.name}}</h4>
          <p>{{value.des}}</p>
        </div>
      </div>
    </div>
    <!-- 其他维修 -->
    <div class="fix-center__other">
      <div class="fix-center__other--title">
        <h3>其他维修服务</h3>
      </div>
      <div style="text-align:center;color: #677788;">填写您的需求，根据需求来生成您想要的服务</div>
      <div class="fix-center__other--content">
        <img src="../assets/imgs/otherFix.png" width="55%"></img>
        <div class="content__form" style="width: 40%;padding-top:10px;padding-left:10px">
          <el-form ref="otherForm" :model="otherForm" label-width="100px" :rules="rules"> 
            <el-form-item label="维修项目：" prop="name" >
              <el-input v-model="otherForm.name" placeholder="请输入维修项目名称"></el-input>
            </el-form-item>
            <el-form-item label="具体描述：" prop="des">
              <el-input type="textarea" :rows="5" v-model="otherForm.des" placeholder="请输入您想要维修项目的具体内容"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="createOrder('otherForm')">立即生成</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCommonlyFixList } from '../api/index';
export default {
  name: '',
  props: [''],
  data() {
    return {
      rangeItems: [
        {
          id: '1',
          name: '空调维修',
          imgUrl: require('../assets/imgs/kongtiao.png'),
          desc: '空调加氟，基本维修，空调清理等',
        },
        {
          id: '2',
          name: '厨房用品维修',
          imgUrl: require('../assets/imgs/chufang.png'),
          desc: '冰箱，燃气灶，油烟机等',
        },
        {
          id: '3',
          name: '洗衣机维修',
          imgUrl: require('../assets/imgs/xiyiji.png'),
          desc: '洗衣机维修',
        },
        {
          id: '4',
          name: '热水器维修',
          imgUrl: require('../assets/imgs/reshuiqi.png'),
          desc: '热水器维修',
        },
      ],
      otherForm:{
        type:1,
        standard:'具体面议',
        name:'',
        des:'',
      },
      rules:{
        name: [
            { required: true, message: '请填写具体维修项目名称', trigger: 'change' }
        ],
        des: [
            { required: true, message: '请填写您想要维修的具体描述', trigger: 'change' }
        ],
      }
    };
  },
  components: {},
  created() {
    this.getCommonlyList();
  },
  mounted() {
    document.body.scrollTop = 0;
  },
  methods: {
    // 维修跳转
    handleFix(value) {
      let q = {};
      Object.assign(q, value);
      q.type = 1;
      this.$router.push({
        path: '/orderTemplate',
        query: {
          q: JSON.stringify(q),
        },
      });
    },
    // 生成其他维修服务订单
    createOrder(formName){
      this.$refs[formName].validate((valid) => {
          if (valid) {
            this.otherForm.standard = this.otherForm.des
            this.$router.push({
              path: '/orderTemplate',
              query: {
                q: JSON.stringify(this.otherForm),
              },
            });
          } else {
            return false;
          }
        });
      
    },
    // 获取常用维修列表
    getCommonlyList() {
      getCommonlyFixList().then((res) => {
        if (res.code === 200) {
          this.rangeItems = res.data;
        }
      });
    },
  },
  watch: {},
};
</script>

<style scoped lang="scss">
.fix-center {
  width: 100%;
  .fix-center__title {
    width: 100%;
    height: 220px;
    background: url('../assets/imgs/blue_top.png') no-repeat;
    background-size: cover;
    h2 {
      color: #fff;
      font-size: 50px;
      line-height: 220px;
      text-align: center;
      letter-spacing: 0.5rem;
    }
  }
  .fix-center__range {
    padding: 0 220px;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 60px;
    .fix-center__range--flex {
      display: flex;
      justify-content: space-around;
      text-align: center;
    }
    .fix-center__range--title {
      font-size: 1.5em;
      height: 55px;
      margin: 30px 0 10px 0;
      text-align: center;
      &::after {
        display: block;
        width: 40px;
        background: #004b92;
        height: 3px;
        content: '';
        margin: 10px auto 25px auto;
      }
    }
    .fix-center__range--item {
      width: 25%;
      transition: all 0.5s;
      color: #a0a0a0;
      font-size: 14px;
      &:hover {
        cursor: pointer;
        transform: scale(0.88);
        -webkit-transform: scale(0.88);
        -moz-transform: scale(0.88);
        -o-transform: scale(0.88);
        p {
          color: #000;
        }
      }
      h4 {
        color: #a0a0a0;
        font-size: 21px;
        margin-bottom: 5px;
      }
    }
  }
  .fix-center__other {
    background: #f7f7f7;
    padding: 20px 220px;
    .fix-center__other--title {
      font-size: 1.5em;
      height: 55px;
      margin-bottom: 10px;
      text-align: center;
      &::after {
        display: block;
        width: 40px;
        background: #004b92;
        height: 3px;
        content: '';
        margin: 10px auto 25px auto;
      }
    }
    .fix-center__other--content {
      display: flex;
      justify-content: flex-start;
      background-color: #fff;
      height: 465px;
      border-radius: 4px;
      margin-top: 20px;
      overflow: hidden;
      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);

    }
  }
}
</style>